<template>
  <div class="user-view">
    <div class="l">
      <div>
        <span class="user-name">{{user.userName}}</span>&nbsp;
        <span class="user-position">{{user.userPosition}}</span>
      </div>
      <div>
        <span class="user-dept">{{user.userDept}}</span>
      </div>
    </div>
    <!-- <div class="r">
      <el-breadcrumb separator="|" style="display: block;">
        <el-breadcrumb-item v-for="(item,index) in systemLanguages" :key="index">
          <span :class="['system-languages', item.isActive ? 'is-active' : '']" @click="changeLanguage(item)">{{item.label}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { getUserInfo, changeUser, getCurrentUserDetail } from '@/api/api.js'
import store from '@/store'
export default {
  /**
   * header 头部右上角用户视图组件
   */
  name: 'UserView',
  props: {

  },
  data () {
    return {
      theme: { // theme class
        themeSummer: 'theme-summer',
        themeCyan: 'theme-cyan',
        themeRed: 'theme-red'
      },
      systemLanguages: [
        {
          value: 'zh-CN',
          isActive: true,
          label: '中'
        },
        {
          value: 'en-US',
          isActive: false,
          label: 'EN'
        }
      ],
      systemQuery: {
        q: null
      },
      user: {
        userName: '',
        userPosition: '',
        userDept: ''
      }
    }
  },
  created () {
    this.getNowUser()
  },
  mounted () {
    //判断是哪种颜色
    if (localStorage.hasOwnProperty('theme') != false) {
      document.getElementById('body').className = localStorage.getItem('theme')
    } else {
      document.getElementById('body').className = this.theme.themeSummer
      localStorage.setItem('theme', this.theme.themeSummer)
    }
  },
  methods: {
    ...mapActions('user', [
      'serUser'
    ]),
    //语言切换
    changeLanguage (command) {
      this.systemLanguages.map(function (item, index) {
        item.isActive = false
      })
      command.isActive = true
      this.$i18n.locale = command.value
      store.commit('setLanguage', command.value)
    },
    // //获取当前用户
    getNowUser () {
      let _this = this;
      getCurrentUserDetail({}).then((result) => {
        if (result.status == "200" && result.data.code == "0") {
          _this.user.userName = result.data.data.userName;
          // _this.user.userPosition = result.data.data.userName;
          _this.user.userDept = result.data.data.deptNamePath;
          // _this.$root.NOW_USER = result.data.data;
          // sessionStorage.setItem('user', result.data.data);
          //_this.getMenuPerm(result.data.data);    //离岸开发屏蔽

          //自动跳转到 发起兑奖流程  路由判断是否有权限  由于是动态路由，如果没有权限会跳转404页面
          // _this.$router.push("flow_add");
          this.serUser(result.data.data)
        } else {
          _this.$alert(result.data.msg, _this.$t('cm.tips'));
        }
      }).catch((err) => {
        _this.$alert(err,_this.$t('cm.tips'));
      });
    },
    //切换用户功能
    // triggerUser: function () {
    //   let _this = this;
    //   this.$prompt("请输入域帐号", _this.$t('cm.tips'), {
    //     confirmButtonText: this.$t('te.confirm'),
    //     cancelButtonText: this.$t('te.cancel'),
    //     cancelButtonClass: 'btn-second',
    //     confirmButtonClass: 'btn-default',
    //   }).then(({ value }) => {
    //     changeUser(value).then((result) => {
    //       if (result.status == "200" && result.data.code == "0") {
    //         sessionStorage.removeItem('user');
    //         _this.$router.go(0);
    //       } else {
    //         _this.$alert(result.data.msg, _this.$t('cm.tips'));
    //       }
    //     }).catch((err) => {
    //       _this.$alert(err, _this.$t('cm.tips'));
    //     });
    //   }).catch((err) => {
    //     //cancel operate

    //   });
    // },
    //皮肤切换
    changeColor (command) {
      if (!command) {
        command = this.theme.themeSummer
      }
      let theme = command
      document.getElementById('body').className = theme
      localStorage.setItem('theme', theme)
    },
  },
  watch: {
  }
}
</script>
<style lang="scss">
.user-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .l {
    font-size: 12px;
    .user-name {
      font-size: 16px;
    }
  }
  .r{
    margin-left: 20px;
    .system-languages {
      cursor: pointer;
    }
    .is-active {
      font-weight: bold;
    }
  }
}
</style>
